import React, { Component } from 'react'
import HeaderBar from 'components/headerbar/HeaderBar'
import Search from 'components/search/Search'
import "./Category.style.scss"
import { Route, withRouter, Redirect, Switch } from 'react-router-dom'
import Classify from './components/Classify'
import Material from './components/Material'
import { get } from 'api/http'

class Category extends Component {

  constructor() {
    super();
    this.state = {
      dir: 'left',
      classify:[],
      material:[]
    }
  }

  handleClick(dir) {
    this.setState({
      dir
    })
    console.log(this.props)
    if (dir === 'left') {
      this.props.history.push('/home/categroy/classify')
    } else {
      this.props.history.push('/home/categroy/material')
    }
  }

  render() {
    return (
      <div>
        <HeaderBar>
          <div className="categroyBar">
            <ul className={this.state.dir}>
              <li
                className={this.state.dir === 'left' ? 'active' : ''}
                onClick={() => this.handleClick('left')}
              >分类</li>
              <li
                className={this.state.dir === 'right' ? 'active' : ''}
                onClick={() => this.handleClick('right')}
              >食材</li>
            </ul>
          </div>

        </HeaderBar>
        <Search placeholder="想吃啥，搜这里，如：排骨"
          inputBg='#efefef'
          bg='#ffffff'
        ></Search>

        <div>

          <Switch>

            <Route path="/home/categroy/classify" render={()=>{
              return <Classify list={this.state.classify}></Classify>
            }} >
              
            </Route>

            <Route path="/home/categroy/material" >
              <Material list={this.state.material}></Material>
            </Route>

            <Redirect exact from="/home/categroy" to="/home/categroy/classify"></Redirect>
          </Switch>
        </div>

      </div>
    )
  }


  async componentDidMount() {
    let rs = await get('/api/categroy');
    this.setState({
      classify:rs.data.data.category,
      material:rs.data.data.material
    })
    console.log(rs)
  }
}
//withRouter 高阶组件，作用：对Category增加路由上下文的信息
export default withRouter(Category)
